<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Tabs Example</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            font-family: Arial, sans-serif;
        }

        .top-bar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 25px;
            background-color: steelblue;
            color: white;
            display: flex;
            align-items: center;
            padding: 0 10px;
            box-sizing: border-box;
            z-index: 1000;
        }

        .container {
            display: flex;
            margin-top: 25px; /* Offset for the fixed top bar */
            height: calc(100% - 25px);
            transition: all 0.3s;
        }

        .sidebar {
            width: 250px;
            background-color: #f4f4f4;
            border-right: 1px solid #ccc;
            height: 100%;
            padding: 10px;
            box-sizing: border-box;
            transition: all 0.3s;
        }

        .content {
            flex: 1;
            padding: 10px;
            box-sizing: border-box;
        }

        .tabs {
            display: flex;
            border-bottom: 1px solid #ccc;
        }

        .tab {
            padding: 10px;
            cursor: pointer;
            border: 1px solid #ccc;
            border-bottom: none;
            margin-right: 5px;
            position: relative;
            display: flex;
            align-items: center;
        }

        .tab.active {
            background-color: white;
            font-weight: bold;
        }

        .tab .close-btn {
            margin-left: 10px;
            cursor: pointer;
            color: red;
            font-weight: bold;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        .hide-sidebar .sidebar {
            display: none;
        }

        .hide-sidebar .content {
            margin-left: 0;
        }
    </style>
</head>
<body>
    <div class="top-bar">
        <button onclick="toggleSidebar()">Toggle Sidebar</button>
        <span style="margin-left: 10px;">This is the top bar</span>
    </div>
    <div class="container" id="main-container">
        <div class="sidebar" id="sidebar">
            <button onclick="createOrActivateTab('Tab1')">Open Tab 1</button>
            <button onclick="createOrActivateTab('Tab2')">Open Tab 2</button>
            <button onclick="createOrActivateTab('Tab3')">Open Tab 3</button>
        </div>
        <div class="content">
            <div class="tabs" id="tabs"></div>
            <div id="tab-content-container"></div>
        </div>
    </div>

    <script>
        function toggleSidebar() {
            var container = document.getElementById('main-container');
            container.classList.toggle('hide-sidebar');
        }

        function createOrActivateTab(tabName) {
            var tabs = document.getElementById('tabs');
            var tabContentContainer = document.getElementById('tab-content-container');
            
            var existingTab = document.getElementById(tabName);
            var existingTabContent = document.getElementById(tabName + '-content');

            if (existingTab) {
                activateTab(existingTab, existingTabContent);
            } else {
                var newTab = document.createElement('div');
                newTab.className = 'tab';
                newTab.id = tabName;
                newTab.innerHTML = `${tabName} <span class="close-btn" onclick="closeTab(event, '${tabName}')">x</span>`;
                newTab.onclick = function() { activateTab(newTab, newTabContent); };

                var newTabContent = document.createElement('div');
                newTabContent.className = 'tab-content';
                newTabContent.id = tabName + '-content';
                newTabContent.innerHTML = `<p>Content for ${tabName}</p>`;

                tabs.appendChild(newTab);
                tabContentContainer.appendChild(newTabContent);

                activateTab(newTab, newTabContent);
            }
        }

        function activateTab(tab, tabContent) {
            var i, tablinks, tabcontents;
            tablinks = document.getElementsByClassName('tab');
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].classList.remove('active');
            }

            tabcontents = document.getElementsByClassName('tab-content');
            for (i = 0; i < tabcontents.length; i++) {
                tabcontents[i].classList.remove('active');
            }

            tab.classList.add('active');
            tabContent.classList.add('active');
        }

        function closeTab(event, tabName) {
            event.stopPropagation();
            var tab = document.getElementById(tabName);
            var tabContent = document.getElementById(tabName + '-content');
            tab.remove();
            tabContent.remove();

            var tabs = document.getElementsByClassName('tab');
            if (tabs.length > 0) {
                activateTab(tabs[0], document.getElementById(tabs[0].id + '-content'));
            }
        }
    </script>
</body>
</html>
